<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <div>
            <h3>系统公告</h3>
          </div>
          <el-collapse accordion v-model="active">
            <el-collapse-item :name="index" v-for="(item ,index) in 1" :key="item.id">
              <template slot="title">
                <b>随着2024年全国硕士研究生招生考试的日益临近，为确保广大考生能够及时、准确地了解相关报考信息，现就有关事项通知如下：</b>
                <span style="margin-left: 50px; color: #888">{{ item.time }}</span>
              </template>
              <div style="padding: 10px 20px">
                报名时间：根据教育部统一部署，2024年全国硕士研究生招生考试的网上预报名时间为2023年9月XX日至XX日，正式报名时间为2023年10月XX日至XX日。请考生务必在规定时间内登录“中国研究生招生信息网”（https://yz.chsi.com.cn/）完成网上报名及缴费工作。
              </div>
              <div style="padding: 10px 20px">
                考试时间：初试时间定于2023年12月XX日至XX日举行，具体考试科目及时间安排请参照后续发布的《准考证》及考点公告。
              </div>
              <div style="padding: 10px 20px">
                考点选择：考生需根据个人实际情况，在报名时慎重选择报考点，一旦确认不得更改。部分考点可能因容量限制需要提前预约或满足特定条件，请考生密切关注报考点发布的公告。
              </div>
              <div style="padding: 10px 20px">
                准考证打印：考生可于考前一周左右登录报名网站下载并打印《准考证》，准考证上包含考试时间、地点、座位号等重要信息，请妥善保管。
              </div>
            </el-collapse-item>
          </el-collapse>
          <!-- <el-collapse accordion v-model="active">
            <el-collapse-item :name="index" v-for="(item ,index) in notices" :key="item.id">
              <template slot="title">
                <b>{{ item.title }}</b>
                <span style="margin-left: 50px; color: #888">{{ item.time }}</span>
              </template>
              <div style="padding: 0 20px">{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import API from '../../utils/request'

const url = "/api/user/"

export default {
  name: "Home",
  data() {
    return {
      notices: [],
      active: 0,
      user: {},
    };
  },
  mounted() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.load()
    this.drawLine()
  },
  methods: {
    load() {
      API.get("/api/notice/").then((res) => {
        this.notices = res.data;
      })
    },
    drawLine() {
      const pieOption = {
        title: {text: '分类明星周边销量统计'},
        tooltip: {trigger: 'item'},
        legend: {top: '0', left: 'right'},
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: [

            ]
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('pie'))

      API.get("/api/goods").then(res => {
        let category = Array.from(new Set(res.data.map(v => v.categoryName)))
        category.forEach(item => {
          pieOption.series[0].data.push({name: item, value: res.data.filter(v => v.categoryName === item).map(v => v.sales).reduce((a,b) => a + b)})
        })
        console.log(pieOption)
        // 绘制图表
        myChart.setOption(pieOption);
      })
    }
  },
};
</script>

<style scoped>
</style>
